<template>
  <div class="phone-ui-container" :style="containerStyle">
    <!-- 手机外框 -->
    <div class="phone-frame" :style="frameStyle">
      <!-- 屏幕区域 -->
      <div class="phone-screen" :style="screenStyle">
        <!-- 刘海/动态岛 -->
        <div class="phone-notch" :style="notchStyle" />

        <!-- 屏幕内容区域 -->
        <div class="phone-content" :style="contentStyle">
          <slot />
        </div>
      </div>

      <!-- 左侧按钮 -->
      <div v-if="finalConfig.buttonConfig.left.length > 0" :style="{ ...buttonContainerStyle, left: '0' }">
        <div v-for="(button, index) in finalConfig.buttonConfig.left" :key="`left-${index}`"
          :style="getButtonStyle(button, 'left')" />
      </div>

      <!-- 右侧按钮 -->
      <div v-if="finalConfig.buttonConfig.right.length > 0" :style="{ ...buttonContainerStyle, right: '0' }">
        <div v-for="(button, index) in finalConfig.buttonConfig.right" :key="`right-${index}`"
          :style="getButtonStyle(button, 'right')" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { CSSProperties } from 'vue'
import type { PhoneUIProps } from '../types'
import { phonePresets, defaultPhonePreset } from '../presets'

// Props
const props = withDefaults(defineProps<PhoneUIProps>(), {
  phoneType: 'custom',
  frameColor: '#1a1a1a',
  screenColor: '#ffffff',
  showButtons: true
})

// 计算最终配置（预设配置 + 用户覆盖配置）
const finalConfig = computed(() => {
  let baseConfig

  // 如果 phoneType 在预设库中存在，使用预设配置
  if (props.phoneType && phonePresets[props.phoneType]) {
    baseConfig = { ...phonePresets[props.phoneType] }
  } else {
    // 否则使用默认配置
    baseConfig = { ...defaultPhonePreset }
  }

  // 用用户传入的 props 覆盖基础配置
  return {
    width: props.width ?? baseConfig.width,
    height: props.height ?? baseConfig.height,
    borderRadius: props.borderRadius ?? baseConfig.borderRadius,
    frameWidth: props.frameWidth ?? baseConfig.frameWidth,
    notchType: props.notchType ?? baseConfig.notchType,
    buttonConfig: props.buttonConfig ?? baseConfig.buttonConfig
  }
})

// 计算实际尺寸
const actualSize = computed(() => {
  const config = finalConfig.value
  const frameThickness = config.frameWidth

  return {
    screenWidth: config.width,
    screenHeight: config.height,
    frameWidth: config.width + frameThickness * 2,
    frameHeight: config.height + frameThickness * 2,
    borderRadius: config.borderRadius,
    frameThickness
  }
})

// 容器样式
const containerStyle = computed((): CSSProperties => ({
  display: 'inline-block',
  position: 'relative',
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
}))

// 外框样式
const frameStyle = computed((): CSSProperties => ({
  width: `${actualSize.value.frameWidth}px`,
  height: `${actualSize.value.frameHeight}px`,
  backgroundColor: props.frameColor,
  borderRadius: `${actualSize.value.borderRadius}px`,
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  boxShadow: '0 8px 40px rgba(0, 0, 0, 0.3)',
  border: '2px solid rgba(255, 255, 255, 0.1)',
  boxSizing: 'border-box'
}))

// 屏幕样式
const screenStyle = computed((): CSSProperties => {
  const screenRadius = Math.max(0, actualSize.value.borderRadius - actualSize.value.frameThickness)

  return {
    width: `${actualSize.value.screenWidth}px`,
    height: `${actualSize.value.screenHeight}px`,
    backgroundColor: props.screenColor,
    borderRadius: `${screenRadius}px`,
    position: 'relative',
    overflow: 'hidden',
    boxSizing: 'border-box'
  }
})

// 刘海/动态岛样式
const notchStyle = computed((): CSSProperties => {
  const config = finalConfig.value
  const baseStyle = {
    boxSizing: 'border-box' as const
  }
  
  if (config.notchType === '0') {
    // 小圆点
    return {
      ...baseStyle,
      position: 'absolute',
      top: '12px',
      left: '50%',
      transform: 'translateX(-50%)',
      width: '37px',
      height: '37px',
      backgroundColor: '#000000',
      borderRadius: '18.5px',
      zIndex: 10,
      border: '1px solid rgba(255, 255, 255, 0.1)'
    }
  } else if (config.notchType === '1') {
    // 动态岛设计 - 小椭圆胶囊状
    return {
      ...baseStyle,
      position: 'absolute',
      top: '12px',
      left: '50%',
      transform: 'translateX(-50%)',
      width: '126px',
      height: '37px',
      backgroundColor: '#000000',
      borderRadius: '18.5px',
      zIndex: 10,
      border: '1px solid rgba(255, 255, 255, 0.1)'
    }
  } else if (config.notchType === '2') {
    // 传统刘海设计（用于其他机型）
    const notchWidth = Math.min(120, actualSize.value.screenWidth * 0.3)
    const notchHeight = 20
    return {
      ...baseStyle,
      position: 'absolute',
      top: '0',
      left: '50%',
      transform: 'translateX(-50%)',
      width: `${notchWidth}px`,
      height: `${notchHeight}px`,
      backgroundColor: props.frameColor,
      borderRadius: `0 0 ${notchHeight / 2}px ${notchHeight / 2}px`,
      zIndex: 10
    }
  } else {
    // 没有刘海或动态岛
    return baseStyle
  }
})

// 内容区域样式
const contentStyle = computed((): CSSProperties => ({
  width: '100%',
  height: '100%',
  position: 'relative',
  zIndex: 1,
  overflow: 'auto',
  boxSizing: 'border-box'
}))

// 按钮样式
const getButtonStyle = (button: { top: number; height: number }, side: 'left' | 'right'): CSSProperties => {
  const buttonWidth = 5
  const topOffset = button.top + actualSize.value.frameThickness

  return {
    position: 'absolute',
    [side]: `-${buttonWidth}px`,
    top: `${topOffset}px`,
    width: `${buttonWidth}px`,
    height: `${button.height}px`,
    backgroundColor: props.frameColor,
    borderRadius: side === 'left' ? '2px 0 0 2px' : '0 2px 2px 0',
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
    boxSizing: 'border-box'
  }
}

// 按钮容器样式
const buttonContainerStyle = computed((): CSSProperties => ({
  position: 'absolute',
  top: '0',
  height: '100%'
}))
</script>
